<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增作业-课程-班级记录')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-class-add">
        <input name="courseId" th:field="${courseId}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">课程名称：</label>
            <div class="col-sm-8">
                <input name="courseName" class="form-control" type="text" disabled th:value="${courseName}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">选择需要布置作业的班级：</label>
            <div class="col-sm-8">
                <select class="form-control m-b" multiple id="classIds">
                    <option th:each="grade : ${classGradesList}" th:text="${grade.name}"
                            th:value="${grade.id}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">作业标题/题目：</label>
            <div class="col-sm-8">
                <input name="title" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">章节/知识点描述：</label>
            <div class="col-sm-8">
                <input name="knowledgeDescription" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">作业类型： 1.选择题 2.填空题 3.简答题 4.文档上传题：</label>
            <div class="col-sm-8">
                <select name="type" class="form-control m-b">
                    <option value="">请选择作业类型</option>
                    <option value="1">选择题</option>
                    <option value="2">填空题</option>
                    <option value="3">简答题</option>
                    <option value="4">文档上传题</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">选项与答案</label>
            <div class="col-sm-8">
                <table id="courseTarget" lay-filter="courseTarget"></table>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">作业描述：</label>
            <div class="col-sm-8">
                <input name="description" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">作业要求：</label>
            <div class="col-sm-8">
                <input name="requirement" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">作业分值：</label>
            <div class="col-sm-8">
                <input name="score" class="form-control" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开始时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="beginTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">截至时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="endTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补交时间：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="makeUpTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">补交扣分：</label>
            <div class="col-sm-8">
                <input name="deductScore" class="form-control" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/html" id="courseTargetRowToolbar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/job"
    $("#form-class-add").validate({
        focusCleanup: true
    });

    // 课程目标表格组件
    layui.use('table', function () {
        var table = layui.table;

        //课程目标表格
        table.render({
            elem: '#courseTarget'
            , id: 'courseTargetId'
            , toolbar: true
            , defaultToolbar: [{
                title: '新增'
                , layEvent: 'addRow'
                , icon: 'layui-icon-addition'
            }]
            , height: 312
            , data: []
            , cols: [[ //表头
                {field: 'option', title: '选项', edit: 'text'}
                , {field: 'content', title: '内容', edit: 'text'}
                , {fixed: 'right', align: 'center', toolbar: '#courseTargetRowToolbar'}
            ]]
        });

        table.on('toolbar(courseTarget)', function (obj) {
            switch (obj.event) {
                case 'addRow':
                    buttonArr = [];//清空数组
                    var courseTargetData = table.cache.courseTargetId;
                    console.log('courseTargetData is', courseTargetData)
                    for (var i = 0; i < courseTargetData.length; i++) {
                        buttonArr.push(courseTargetData[i]);      //将之前的数组存储
                    }
                    //在尾部新增一行空数据，实现增行效果
                    buttonArr.push({
                        "option": '',
                        "content": '',
                    });
                    table.reload("courseTargetId", {
                        data: buttonArr   // 将新数据重新载入表格
                    })
                    layer.msg('添加成功')
                    break;
            }
        })

        table.on('tool(courseTarget)', function (obj) {
            var data = obj.data; //获得当前行数据
            console.log('data is', data)
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                //同步更新缓存对应的值
                obj.update({
                    data
                });
                layer.msg('保存成功')
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        })

        table.on('edit(courseTarget)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            var data = obj.data
            obj.update({
                data
            })
        });
    });

    function submitHandler() {
        var classIds = $('#classIds').val()
        console.log('classIds is', classIds)
        var data = $('#form-class-add').serialize()
        // var reportCourseTargetTableData = layui.table.cache.courseTargetId
        // for (let i = 0; i <reportCourseTargetTableData.length ; i++) {
        //
        // }
        if (classIds) {
            data.classIds = classIds.join(',')
        }
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", data);
        }
    }

    $("input[name='beginTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='endTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='makeUpTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>
